class SimpleCanvas {
    canvas;
    ctx;
    backCanvas;
    backCtx;
    gravity = 9.8;
    meter_dev_px = 30;
    constructor(canvas) {
        if (typeof canvas == "string") {
            this.canvas = document.getElementById(canvas)
        } else {
            this.canvas = canvas;
        }
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.ctx = this.canvas.getContext("2d")
        this.backCanvas = document.createElement("canvas")
        this.backCanvas.width = window.innerWidth;
        this.backCanvas.height = window.innerHeight;
        this.backCtx = this.backCanvas.getContext("2d")
        this.canvas.addEventListener("mousemove", function (e) {
            element.mouse = e;
        })
        this.canvas.addEventListener("click", function (e) {
            element.click(e)
        })
        document.addEventListener("keydown", function (e) {
            element.key = e;
            element.keyFlag++;
        })
        document.addEventListener("keyup", function (e) {
            element.key = e;
            element.keyFlag--;
        })
    }
    update = function () {
        let that = this;
        let up = function () {
            that.ctx.putImageData(that.backCtx.getImageData(0, 0, that.canvas.width, that.canvas.height), 0, 0);
            that.backCtx.clearRect(0, 0, that.canvas.width, that.canvas.height);
            element.refresh(that.backCtx);
            requestAnimationFrame(up)
        }
        up()
    };

}
var getRandomColor = function () {
    return '#' + (function (color) {
        return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)])
            && (color.length == 6) ? color : arguments.callee(color);
    })('');
}

class element {
    static elements = [];
    select = false;
    static mouse = { x: 0, y: 0 };
    static key = {};
    static keyFlag = 0;
    constructor() {
        element.elements.push(this)
    }
    static refresh(ctx) {
        element.elements.forEach((ele) => {
            if (element.keyFlag > 0) {
                element.elements.filter((el) => {
                    if (el.keyDown) {
                        return true
                    } else {
                        return false
                    }
                }).forEach((ele) => {
                    ele.keyDown(this.key)
                })
                element.elements.filter((el) => {
                    if (el.keyUp) {
                        return true
                    } else {
                        return false
                    }
                }).forEach((ele) => {
                    ele.keyUp(this.key)
                })
            }
            ele.print(ctx);
            if (ctx.isPointInPath(this.mouse.x, this.mouse.y)) {
                ele.select = true;
            } else {
                ele.select = false;
            }
        })
    }
    print = function (ctx) { }
    static click = function (e) {
        element.elements.filter((el) => { return el.select && el.click }).forEach((ele) => {
            ele.click(e)
        })
    }
}
class Box extends element {
    x = 0;
    y = 0;
    w = 0;
    h = 0;
    c = "#FFF";

    constructor(x, y, w, h) {
        super();
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    }

    print = function (ctx) {
        ctx.save()
        ctx.beginPath()
        ctx.fillStyle = this.c;
        ctx.rect(this.x, this.y, this.w, this.h);
        ctx.fill();
        ctx.closePath()
        ctx.restore();

    }

}

